<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .box1
    {
        height: 200px;
        width: 200px;
        /*background-color: #bfa;*/
        /*
        通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他过渡的效果
        渐变是图片，需要通过background-image来设置
        linear-gradient()线性渐变，颜色沿着一条直线发生变化
        background-image: linear-gradient(red,yelloow)红色在开头，黄色在结尾，中间是过渡区域
        线性渐变的开头，可以指定一个渐变的方向
        to left
        to right
        to top
        to bottom
        xxxdeg deg表示角度数（以上为0度角，360为一个循环）
        也可以存在一些组合值 比如to top left
        1turn 表示一圈 修改前面的值可以转不动的幅度，比如半圈0.5turn
        渐变可以同时制定多个颜色，多个颜色在默认情况下平均分布，默认方向是向下
        也可以手动置顶渐变的分布情况,后面制定一个像素值，来设定从哪个距离开始渐变（当然也可以使用百分比）
        */
        /*background-image: linear-gradient(red,white,yellow,blue,black);*/
        /*background-image: linear-gradient(red 25%,yellow 50%);*/

        /*
        repeating-linear-gradient()可以平铺的线性渐变
        会用同一种元素把内容区铺满
        */
        background-image: repeating-linear-gradient(red 50px,yellow 100px);
    }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>